<template>
	<fui-search-bar @search="search"></fui-search-bar>

	<view class="section white">
		<view class="item" @click="gopeifangyuanliao">
			<view class="icon">
				<image src="https://zjdemo.xuande.work:8889/photo/6a7ab453ad294edf9d9e153fd8eb52ef.png"
					class="icon-img"></image>
			</view>

		</view>
		<view class="item" @click="goZhiKa">
			<view class="icon">
				<image src="https://zjdemo.xuande.work:8889/photo/30491d9a595840c585107a8e89029400.png"
					class="icon-img"></image>
			</view>

		</view>
		<view class="item">
			<view class="icon">
				<image src="https://zjdemo.xuande.work:8889/photo/f0ab4b13423448d1ad25eb5e98044591.png" class="icon-img"
					@click="goYaoqingyouyli"></image>
			</view>

		</view>
		<view class="item" @click="huodongzhongxin">
			<view class="icon">
				<image src="https://zjdemo.xuande.work:8889/photo/701ce2a6ae6f40a7925e651472290b91.png"
					class="icon-img"></image>
			</view>

		</view>

	</view>
	<view class="section white">
		<view class="item" @click="gopeifangyuanliao">
			<view class="icon">
				<image src="https://zjdemo.xuande.work:8889/photo/6a7ab453ad294edf9d9e153fd8eb52ef.png"
					class="icon-img"></image>
			</view>

		</view>
		<view class="item" @click="goZhiKa">
			<view class="icon">
				<image src="https://zjdemo.xuande.work:8889/photo/30491d9a595840c585107a8e89029400.png"
					class="icon-img"></image>
			</view>

		</view>
		<view class="item">
			<view class="icon">
				<image src="https://zjdemo.xuande.work:8889/photo/f0ab4b13423448d1ad25eb5e98044591.png" class="icon-img"
					@click="goYaoqingyouyli"></image>
			</view>

		</view>
		<view class="item" @click="huodongzhongxin">
			<view class="icon">
				<image src="https://zjdemo.xuande.work:8889/photo/701ce2a6ae6f40a7925e651472290b91.png"
					class="icon-img"></image>
			</view>

		</view>

	</view>
	<fui-tabs @change="change" :short="false" :tabs="tabs" isDot scroll alignLeft></fui-tabs>
	<view v-for="(itemTab, index) in tabs" :key="index">
		<view v-if="currentTab === itemTab">
			<fui-waterfall>
				<fui-waterfall-item v-for="(item, indexs) in filteredImages" :key="indexs" :src="item.imageUrl">
					<view >
						<!-- 调试信息 -->
						<!-- <view>当前标签: {{ currentTab }}</view> -->
						<view  v-if="item.currentTabs === currentTab" class="product-card">
							<text>{{ item.title }}</text>
							<view style="height: 10px;"></view>
							<view><text style="font-size: 14px;">￥</text>{{ item.originalPrice }}</view>
						</view>
					</view>
				</fui-waterfall-item>
				<view v-if="filteredImages.length === 0" class="no-data">
					<fui-empty src="https://res.firstui.cn/static/images/component/empty/img_data_3x.png" title="暂无数据"
						descr="功能开发中，敬请期待！">
						<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx"
							background="#fff" :margin="['64rpx','0']" borderColor="#465CFF"
							color="#465CFF"></fui-button>
					</fui-empty>
				</view>
			</fui-waterfall>
		</view>
	</view>
	<view v-if="!tabs.includes(currentTab)">
		<fui-empty src="https://res.firstui.cn/static/images/component/empty/img_data_3x.png" title="暂无数据"
			descr="功能开发中，敬请期待！">
			<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
				:margin="['64rpx','0']" borderColor="#465CFF" color="#465CFF"></fui-button>
		</fui-empty>
	</view>






</template>

<script>
	import {
		url
	} from '@/utils/request.js';
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	export default {
		data() {
			return {
				currentTab: '神秘三星堆',
				images: [
					{
						imageUrl: 'https://res.firstui.cn/static/images/component/waterfall/P_001.jpeg',
						title: '红米K60 Pro',
						originalPrice: '1788',
						shippingPrice: '3599',
						currentTabs: '神秘三星堆'
					},
					{
						imageUrl: 'https://res.firstui.cn/static/images/component/waterfall/P_003.jpeg',
						title: '红米K60 Pro',
						originalPrice: '1788',
						shippingPrice: '3599',
						currentTabs: '带扣'
					},
					{
						imageUrl: 'https://res.firstui.cn/static/images/component/waterfall/P_003.jpeg',
						title: '红米K60 Pro',
						originalPrice: '1788',
						shippingPrice: '3599',
						currentTabs: '带扣'
					},
					{
						imageUrl: 'https://res.firstui.cn/static/images/component/waterfall/P_003.jpeg',
						title: '红米K60 Pro',
						originalPrice: '1788',
						shippingPrice: '3599',
						currentTabs: '带扣'
					},
					{
						imageUrl: 'https://res.firstui.cn/static/images/component/waterfall/P_005.jpeg',
						title: '红米K60 Pro',
						originalPrice: '1788',
						shippingPrice: '3599',
						currentTabs: '神秘三星堆' // 确保这个商品的 currentTabs 匹配 currentTab
					}, ,
					{
						imageUrl: 'https://res.firstui.cn/static/images/component/waterfall/P_005.jpeg',
						title: '红米K60 Pro',
						originalPrice: '1788',
						shippingPrice: '3599',
						currentTabs: '神秘三星堆' // 确保这个商品的 currentTabs 匹配 currentTab
					},
					{
						imageUrl: 'https://res.firstui.cn/static/images/component/waterfall/P_005.jpeg',
						title: '红米K60 Pro',
						originalPrice: '1788',
						shippingPrice: '3599',
						currentTabs: '神秘三星堆' // 确保这个商品的 currentTabs 匹配 currentTab
					},
					{
						imageUrl: 'https://res.firstui.cn/static/images/component/waterfall/P_005.jpeg',
						title: '红米K60 Pro',
						originalPrice: '1788',
						shippingPrice: '3599',
						currentTabs: '韵味敦煌' // 确保这个商品的 currentTabs 匹配 currentTab
					},
					{
						imageUrl: 'https://res.firstui.cn/static/images/component/waterfall/P_005.jpeg',
						title: '红米K60 Pro',
						originalPrice: '1788',
						shippingPrice: '3599',
						currentTabs: '神秘三星堆' // 确保这个商品的 currentTabs 匹配 currentTab
					}
					// 可以添加更多商品信息
				],
				goodsList: [{
					src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
					price: '2800.00'
				}, {
					src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
					price: '48.00'
				}, {
					src: 'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
					price: '29.90',
				}, {
					src: 'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
					price: '8.90'
				}],
				goodsLists: [{
					src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
					price: '2800.00'
				}, {
					src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
					price: '48.00'
				}, {
					src: 'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
					price: '29.90',
				}, {
					src: 'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
					price: '29.90',
				}],
				//数据格式一
				tabs: ['神秘三星堆', '韵味敦煌', '带扣', '书签', '手办', '字画', '盲盒玉玺'],
				items: [{
					text: '综合',
					value: '你好',
					type: 'dropdown',
					active: false
				}, {
					text: '价格',
					type: 'sort',
					sort: 1
				}, {
					text: '分类',
					type: 'text',
					active: false
				}, {
					type: 'switch',
					switch: 1
				}, {
					text: '筛选',
					value: '',
					type: 'filter'
				}]
			}
		},
		computed: {
			filteredImages() {
				return this.images.filter(item => item.currentTabs === this.currentTab);
			}
		},
		onLoad() {
			console.log(this.currentTab)
		},
		methods: {
			change(e) {
				console.log(e.index)
				this.currentTab = this.tabs[e.index]
				console.log(this.currentTab)
			}
		}
	}
</script>

<style lang="scss">
	.product-card {
		display: flex;
		flex-direction: column;
		align-items: left;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		background-color: #fff;
		/* margin: 10px; */
	}

	.product-image {
		width: 100%;
		height: auto;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	.product-info {
		/* padding: 10px; */
		/* text-align: center; */
	}

	.product-info h3 {
		font-size: 18px;
		color: #333;
	}

	.price {
		font-size: 24px;
		color: #e93b3d;
		/* font-weight: bold; */
	}

	.discount {
		font-size: 14px;
		color: #999;
		/* text-decoration: line-through; */
	}

	.promotion {
		font-size: 12px;
		color: #666;
	}

	.fui-cropper__tabbar {
		/* #ifndef APP-NVUE */
		display: flex;
		z-index: 20;
		position: relative;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		height: 120rpx;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifdef APP-NVUE */
		border-top: 0.5px solid #666;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.fui-cropper__tabbar::before {
		content: ' ';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #666;
		transform: scaleY(0.5);
		transform-origin: 0 0;
		z-index: 21;
	}

	/* #endif */

	.fui-text {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		font-size: 32rpx;
		font-weight: normal;
		color: red;
		flex: 1;
		text-align: center;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.fui-list {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.fui-list--item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-left: 10px;
	}

	.fui-list--item:last-child {
		margin-right: 0;
	}

	.section {
		padding: 4px 31px;

	}

	.yellow {
		background-color: white;
		display: flex;
		justify-content: space-between;
	}

	.title {
		font-size: 18px;
		font-weight: bold;

	}

	.description {
		font-size: 14px;
		color: #666;
	}

	.white {
		background-color: #fff;
		display: flex;
		justify-content: space-between;

		border-radius: 8px;
	}

	.item {
		flex: 1;
		text-align: center;
		margin: 0 5px;
	}

	.item.large {
		flex: 2;
	}

	.item.small {
		flex: 1;
	}

	.icon {}

	.icon-img {
		width: 56px;
		height: 56px;
		border: 1px solid red;
		border-radius: 10px;
	}

	.icon-imgs {
		width: 43px;
		height: 43px;
	}

	.text {
		font-size: 12px;
	}

	.beige {
		background-color: #f5f5dc;
		display: flex;
		justify-content: space-between;

	}

	.green {
		background-color: #dff0d8;
		text-align: center;

	}

	.center {
		font-size: 16px;
		font-weight: bold;
	}

	// .container {
	// 	display: flex;
	// 	flex-direction: row;
	// 	gap: 20rpx;
	// }

	.left-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.right-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 20rpx;
	}

	.box {
		height: 200rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.boxs {
		width: 350rpx;
		height: 459rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.invite {
		background-color: #f2ead5;
	}

	.join-group {
		background-color: #f4ddcd;
	}

	.happy-money {
		background-color: #e0e6da;
	}

	.title {
		font-size: 24rpx;
		font-weight: bold;
	}

	.description {
		font-size: 20rpx;
	}
</style>